<script setup>
import { useRouter, useRoute } from 'vue-router';
import UserDialog from './page/front/UserDialog.vue';
import Toast from 'primevue/toast';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

const navigateTo = (path) => {
  router.push(path);
};

// 判断是否为后台管理页面
const isBackstage = computed(() => route.path.startsWith('/backstage'));
// 判断是不是pmpu页面
const isPmpu = computed(() => route.path.startsWith('/pmpu'));
const isPmpu1 = computed(() => route.path.startsWith('/pmpu-scale'));
</script>

<template>
  <div>
    <!-- 前台导航栏，仅在非后台页面显示 -->
    <nav v-if="!isBackstage" class="bg-white shadow-sm fixed top-0 z-10 w-full">
      <div v-if="isPmpu1" class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <img src="/src/assets/logo.jpg" alt="logo" class="w-10 h-10 rounded-full">
            <div class="ml-4 text-2xl font-bold transition-all duration-300 drop-shadow-lg group relative animate-pulse" style="font-family: 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.05em;">
              <span class="relative inline-block bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                计算机化自适应测验
                <div class="absolute -bottom-1 left-0 w-full h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out"></div>
              </span>
            </div>
          </div>
          <div class="flex space-x-8">
            <button 
              @click="navigateTo('/pmpu-scale')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu-scale' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              首页
            </button>
            <button 
              @click="navigateTo('/pmpu-scale/test')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu-scale/test' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              手机测试
            </button>
            <button 
              @click="navigateTo('/pmpu-scale/contact')"
              :class="['px-2 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu-scale/contact' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              联系我们
            </button>
          </div>
          <div>
            <UserDialog />
          </div>
        </div>
      </div>
      
      <div v-else-if="isPmpu" class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <img src="/src/assets/logo.jpg" alt="logo" class="w-10 h-10 rounded-full">
            <div class="ml-4 text-2xl font-bold transition-all duration-300 drop-shadow-lg group relative animate-pulse" style="font-family: 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.05em;">
              <span class="relative inline-block bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                计算机化自适应测验
                <div class="absolute -bottom-1 left-0 w-full h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out"></div>
              </span>
            </div>
          </div>
          <div class="flex space-x-8">
            <button 
              @click="navigateTo('/pmpu')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              首页
            </button>
            <button 
              @click="navigateTo('/pmpu/test')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu/test' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              手机测试
            </button>
            <button 
              @click="navigateTo('/pmpu/contact')"
              :class="['px-2 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer', 
                route.path === '/pmpu/contact' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              联系我们
            </button>
          </div>
          <div>
            <UserDialog />
          </div>
        </div>
      </div>
      <div v-else class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <img src="/src/assets/five-logo.png" alt="logo" class="w-10 h-10 rounded-full">
            <div class="ml-4 text-2xl font-bold transition-all duration-300 drop-shadow-lg group relative animate-pulse" style="font-family: 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.05em;">
              <span class="relative inline-block bg-gradient-to-r from-red-500  via-green-500 to-blue-400 bg-clip-text text-transparent">
                大五人格测试
                <div class="absolute -bottom-1 left-0 w-full h-1 bg-gradient-to-r from-red-400  via-green-400 to-blue-400 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out"></div>
              </span>
            </div>
          </div>
          <div class="flex space-x-8">
            <button 
              @click="navigateTo('/five')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/five' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              首页
            </button>
            <button 
              @click="navigateTo('/five/test')"
              :class="['px-1 py-2 text-sm rounded-md font-medium transition-colors cursor-pointer', 
                route.path === '/five/test' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              人格测试
            </button>
            <button 
              @click="navigateTo('/five/contact')"
              :class="['px-2 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer', 
                route.path === '/five/contact' ? 'border-b-2 border-blue-700 text-blue-700' : 'text-gray-700 hover:text-blue-600']"
            >
              联系我们
            </button>
          </div>
          <div>
            <UserDialog />
          </div>
        </div>
      </div>
    </nav>

    <!-- 路由视图 -->
    <main :style="isBackstage ? '' : 'padding-top: 64px;'">
      <router-view />
    </main>
    <!-- 全局Toast组件 -->
    <Toast />
  </div>
</template>

<style scoped>
</style>
